<template>
	<view class="index">
		<view class="topContent">
			<navBar></navBar>
			<!-- 轮播图 -->
			<view class="banner">
				<swiper class="swiper">
					<swiper-item v-for="item in 4">
						<image class="bannerImg" src="/static/index/banner.png"></image>
					</swiper-item>
				</swiper>
				<view class="dots"><view :class="index==0?'dot dotActive':'dot'" v-for="(item, index) in 4"></view></view>
			</view>
			<!-- 轮播图下的功能按钮 -->
			<view class="function">
				<swiper class="functionSwiper">
					<swiper-item class="functionSwiperItem">
						<view class="functionItem" v-for="item in menuList">
							<image :src="item.image" class="functionImg"></image>
							<view class="functionName">{{item.name}}</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="functionDots"><view :class="index==0?'functionDot functionDotActive':'functionDot'" v-for="(item, index) in 4"></view></view>			
			</view>
		</view>
		<view class="bottom">
			<view class="decorateImg">
				<image src="/static/index/decorate_img.png"></image>
			</view>
			<!-- 分类 -->
			<view class="cateContainer">
				<scroll-view scroll-x class="scrollView">
					<view :class="index==0?'cateItem cateActive':'cateItem'" v-for="(item, index) in cateList">{{item.title}}</view>			
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/house-nav-bar/house-nav-bar.vue';
	export default{
		components: {
			navBar
		},
		data() {
			return {
				// 轮播图下的功能按钮
				menuList: [
					{
						name: '地产',
						image: '/static/index/icon_hourse.png'
					},{
						name: '商城',
						image: '/static/index/icon_store.png'
					},{
						name: '新闻',
						image: '/static/index/icon_news.png'
					},{
						name: '工程',
						image: '/static/index/icon_project.png'
					},{
						name: '投资',
						image: '/static/index/icon_figure.png'
					},{
						name: '教育',
						image: '/static/index/icon_teach.png'
					},{
						name: '医疗',
						image: '/static/index/icon_hospital.png'
					},{
						name: '酒店',
						image: '/static/index/icon_shop.png'
					},{
						name: '餐饮',
						image: '/static/index/icon_meal.png'
					},{
						name: '旅游',
						image: '/static/index/icon_meal.png'
					},
				],
				// 分类
				cateList: [
					{
						title: '精选',
						id: 0,
					},{
						title: '别墅',
						id: 1,
					},{
						title: '公寓',
						id: 2,
					},{
						title: '小区',
						id: 3,
					},{
						title: '商业',
						id: 4,
					},
				]
			}
		}
	}
</script>

<style>
page{
	background: #F3F3F3;
}
.index{
	
}
.topContent{
	padding: 0 26rpx 20rpx;
	width: 100%;
	font-size: 28rpx;
	background: #fff;
	box-sizing: border-box;
}
.banner{
	position: relative;
}
.swiper{
	height: 320rpx;
}
.bannerImg{
	width: 100%;
	height: 100%;
	border-radius: 4rpx;
}
/* 指示点 */
.dots{
	position: absolute;
	display: flex;
	width: 100%;
	left: 0;
	bottom: 10rpx;
	justify-content: center;
}
.functionDots{
	display: flex;
	margin-top: 20rpx;
	justify-content: center;
	align-items: center;
}
.dot, .functionDot{
	margin-right: 20rpx;
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
}
.dot{
	background: #FF8F8F;
}
.functionDot{
	background: #E7E7E7;
}
.dot:last-child, .functionDot:last-child{
	margin: 0;
}
.dotActive, .functionDotActive{
	width: 36rpx;
	height: 12rpx;
	border-radius: 8rpx;
}
.dotActive{
	background: #F22B2B;
}
.functionDotActive{
	background: #C3C3C3;
}
.function{
	margin-top: 30rpx;
	font-size: 26rpx;
}
.functionSwiperItem{
	display: flex;
	flex-wrap: wrap;
}
.functionSwiper{
	width: 100%;
	height: 320rpx;
}
.functionItem{
	margin-bottom: 30rpx;
	width: calc(100% / 5);
	text-align: center;
}
.functionItem:nth-child(n+6) {
	margin: 0;
}
.functionImg{
	margin-bottom: 10rpx;
	width: 90rpx;
	height: 90rpx;
	vertical-align: middle;
}
/* 底部布局 */
.bottom{
	margin-top: 26rpx;
	padding: 0 26rpx;
	width: 100%;
	box-sizing: border-box;
}
.decorateImg{
	width: 100%;
	height: 180rpx;
}
.decorateImg image{
	width: 100%;
	height: 100%;
	vertical-align: middle;
}
/* 分类 */
.cateContainer{
	margin-top: 50rpx;
}
.scrollView{
	overflow: hidden;
	white-space: nowrap;
}
.cateItem{
	display: inline-block;
	margin-right: 80rpx;
}
.cateItem:last-child{
	margin: 0;
}
.cateActive{
	color: #F33632;
}
</style>
